<template>
	<div class="borderAnimation" :style="BorderComputed">
		<text class='borderAnimation-content cen-cen z-ind-100'>
			悬浮动画001:<slot></slot>
		</text>
	</div>
</template>

<script>
	import {} from 'vue'
	export default {
		props: {
			// 盒子宽度
			width: {
				type: String,
				default: "200px"
			},
			// 盒子高度
			height: {
				type: String,
				default: "100px"
			},
			// 边框颜色
			borderColor: {
				type: String,
				default: "blue"
			},
			// 内边距
			padding: {
				type: String,
				default: "10px"
			},
			// 边框圆角度
			borderRadius: {
				type: String,
				default: "10px"
			},
			// 边框粗细
			borderWidth: {
				type: String,
				default: "4px"
			},
			// 文字颜色
			color: {
				type: String,
				default: "#fff"
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "#55aaff"
			},
			// 盒子过渡动画时长
			transitionHover: {
				type: String,
				default: ".8s"
			},
			// 遮罩层背景颜色
			maskColor: {
				type: String,
				default: "rgba(89, 243, 33, 0.5)"
			},
			// 字体大小
			fontSize: {
				type: String,
				default: "14px"
			},

			// 动画时长
			aniDuration: {
				type: String,
				default: "1s"
			},
			// 动画类型
			animationType: {
				type: String,
				default: "ease-in-out"
			}
		},
		name: "borderAnimation",
		computed: {
			BorderComputed() {
				let obj = {
					'--width': this.width,
					'--height': this.height,
					'--borderColor': this.borderColor,


					'--padding': this.padding,
					'--borderRadius': this.borderRadius,
					"--borderWidth": this.borderWidth,
					'--color': this.color,
					'--bgColor': this.bgColor,
					'--transitionHover': this.transitionHover,
					'--maskColor': this.maskColor,
					'--fontSize': this.fontSize,


					"--aniDuration": this.aniDuration,
					"--animationType": this.animationType,

					"--out-border-top": this.borderWidth.slice(0, -2) * 4 * -1 + 'px',

				}
				console.log(obj)
				return obj
			}
		},
		setup() {
			return {

			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.borderAnimation {
		position: relative;
		border: var(--borderWidth) solid var(--borderColor);
		box-sizing: border-box;
		width: var(--width);
		height: var(--height);
		background-color: var(--bgColor);
		color: var(--color);

		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
		}

		&::before {
			top: var(--out-border-top);
			left: var(--out-border-top);
			border-top: var(--borderWidth) solid var(--borderColor);
			border-left: var(--borderWidth) solid var(--borderColor);
			transition: all var(--transitionHover) var(--animationType);
		}

		&::after {
			right: var(--out-border-top);
			bottom: var(--out-border-top);
			border-bottom: var(--borderWidth) solid var(--borderColor);
			border-right: var(--borderWidth) solid var(--borderColor);
			transition: all var(--transitionHover) var(--animationType);
		}

		&:hover::before,
		&:hover::after {
			width: calc(100% - var(--out-border-top) + var(--borderWidth) + var(--borderWidth) + var(--borderWidth));
			height: calc(100% - var(--out-border-top) + var(--borderWidth) + var(--borderWidth) + var(--borderWidth));
		}
	}

	.borderAnimation-content {
		box-sizing: border-box;
		height: inherit;
		width: inherit;
		padding: var(--padding);
		font-size: var(--fontSize);

		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
